<template>
  <div>
        <div class="index-item">
        <div class="item-l">{{bool?'上海':'北京'}}</div>
        <div class="item-r">{{bool?'北京':'上海'}}</div>
        <img src="images/icon-chage.png" alt="" @click="swich()"/>
      </div>
      <div class="index-item">
        <div class="item-l">11月19日<span>周五</span></div>
      </div>
      <ul class="index-select">
        <li>学生票 <input type="checkbox" /></li>
        <li>高铁动车 <input type="checkbox" /></li>
      </ul>
      <button>查询</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool:false
    }
  },
  methods: {
    swich(){
       this.bool=!this.bool
    }
  },
}
</script>

<style scoped>
.index-item {
  margin-top: 0.04rem;
  margin-bottom: 0.08rem;
  height: 0.56rem;
  background: #f8f8f8;
  border-radius: 0.1rem;
  line-height: 0.56rem;
  position: relative;
}
.index-item .item-l,
.index-item .item-r {
  width: 50%;
  height: 100%;
  padding: 0 0.18rem;
  font-size: 0.22rem;
  font-weight: 700;
}
.index-item .item-l {
  float: left;
}
.index-item .item-r {
  text-align: right;
  float: right;
}
.index-item img {
  width: 0.24rem;
  height: 0.24rem;
  position: absolute;
  top: 30%;
  left: 50%;
}
.index-item .item-l span {
  font-size: 0.12rem;
  color: #666;
  margin-left: 0.04rem;
}
.index-select {
  display: flex;
  height: 0.3rem;
}
.index-select li {
  width: 50%;
  color: #666;
  font-size: 0.14rem;
}
.index-select li:nth-child(2) {
  text-align: right;
}
.index button {
  width: 100%;
  height: 0.44rem;
  font-size: 17px;
  box-shadow: 0 8px 16px rgb(255 119 0 / 30%);
  background-color: #f70;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: 500;
}
</style>